import React, { Component } from 'react';
import '../styles/Index/Cate.scss'

class Cate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navlist: [
                {id:1,name:'精选推荐'},
                {id:2,name:'精选推荐'},
                {id:3,name:'精选推荐'},
                {id:4,name:'精选推荐'},
                {id:5,name:'精选推荐'},
                {id:6,name:'精选推荐'},
                {id:7,name:'精选推荐'},
                {id:8,name:'精选推荐'},
                {id:9,name:'精选推荐'},
                {id:10,name:'精选推荐'},
                {id:11,name:'精选推荐'},
            ],
            list1: [
                {
                    name:'面部清洁',
                    list2:[
                        {name:'洁面乳',pic:'https://hbimg.b0.upaiyun.com/860c5ad8bc25f8f94b9965c2ab5a62b5bbe3199836ca8-lnfZVG_fw658'},
                        {name:'洁面乳',pic:'https://hbimg.b0.upaiyun.com/860c5ad8bc25f8f94b9965c2ab5a62b5bbe3199836ca8-lnfZVG_fw658'},
                        {name:'洁面乳',pic:'https://hbimg.b0.upaiyun.com/860c5ad8bc25f8f94b9965c2ab5a62b5bbe3199836ca8-lnfZVG_fw658'},
                        {name:'洁面乳',pic:'https://hbimg.b0.upaiyun.com/860c5ad8bc25f8f94b9965c2ab5a62b5bbe3199836ca8-lnfZVG_fw658'},
                        {name:'洁面乳',pic:'https://hbimg.b0.upaiyun.com/860c5ad8bc25f8f94b9965c2ab5a62b5bbe3199836ca8-lnfZVG_fw658'},
                        {name:'洁面乳',pic:'https://hbimg.b0.upaiyun.com/860c5ad8bc25f8f94b9965c2ab5a62b5bbe3199836ca8-lnfZVG_fw658'}
                    ]
                }
            ],
            clickstate: 0
        }
    }
    statechange(index, id) {
        this.setState({ clickstate: index })
    }
    render() {
        return (
            <div className='cate'>
                <div className="header">
                    <div className="title">
                        分类
                        <span onClick={()=>{this.props.history.push('/search')}} className="search">🔍</span>
                    </div>
                </div>
                <div className='catelist'>
                    <div className="left">
                        {
                            this.state.navlist.map((item, index) => {
                                return (
                                    <li className={this.state.clickstate === index ? 'active' : ''} onClick={() => { this.statechange(index, item.id) }} key={index}><span>{item.name}</span></li>
                                )
                            })
                        }
                    </div>
                    <div className="right">
                        {
                            this.state.list1.map((item, index) => {
                                return (
                                    <div className="name2" key={index}>
                                        <div className='title'> {item.name}</div>
                                        <div className="list">
                                            {
                                                item.list2.map((item, index) => {
                                                    return (
                                                        <div className="item" key={index}>
                                                            < img src={item.pic} alt="" />
                                                            <p>{item.name}</p >
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Cate;